<template>
  <div class="decorateFormRight" v-if="control">
    <component v-bind:is="control.controlName" :item="control"></component>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import Bus from "@/utils/bus";
  export default {
    name: "DecorateFormRight",
    data() {
      return {
        control: null,
        controls: null
      };
    },
    created() {},
    props: [],
    components: {
      headComponent: () => import("./components/headComponent.vue"),
      areaComponent: () => import("./components/areaComponent.vue"),
      checkboxComponent: () => import("./components/checkboxComponent.vue"),
      dateComponent: () => import("./components/dateComponent.vue"),
      dateRangeComponent: () => import("./components/dateRangeComponent.vue"),
      dateTimeComponent: () => import("./components/dateTimeComponent.vue"),
      dateTimeRangeComponent: () => import("./components/dateTimeRangeComponent.vue"),
      idCardComponent: () => import("./components/idCardComponent.vue"),
      imageComponent: () => import("./components/imageComponent.vue"),
      inputComponent: () => import("./components/inputComponent.vue"),
      phoneComponent: () => import("./components/phoneComponent.vue"),
      radioComponent: () => import("./components/radioComponent.vue"),
      selectComponent: () => import("./components/selectComponent.vue"),
      areaComponent: () => import("./components/areaComponent.vue"),
      textareaComponent: () => import("./components/textareaComponent.vue"),
      timeComponent: () => import("./components/timeComponent.vue"),
      timeRangeComponent: () => import("./components/timeRangeComponent.vue"),
    },
    mounted() {
      this.$nextTick(() => {
        this.init();
      });
      Bus.$on("updateRight", () => {
        this.controls = JSON.parse(localStorage.getItem("setFormContent"));
        if (this.controls.length > 0) {
          this.controls.forEach((item, idx) => {
            if (item.active == "on") {
              this.control = JSON.parse(JSON.stringify(item));
            }
          })
        } else {
          this.control = null
        }
      })
    },
    methods: {
      //初始化
      init() {
        this.controls = JSON.parse(localStorage.getItem("setFormContent"));
      },
    },
    computed: {},
    watch: {},
  };
</script>
<style scoped lang="scss">
  .decorateFormRight {
    .catalog {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 10px 15px 10px 0px;
      box-sizing: border-box;
    }
  }
</style>
